<template>
  <el-dialog
    v-model="centerDialogVisible"
    fullscreen
    :show-close="false"
    custom-class="logindialog"
    width="100%"
    center
  >
    <div class="closerank" @click="close">
      <strong></strong>
      <h3>{{ $t("language.rank.name") }}</h3>
      <span>
        <el-icon color="#b5b6c8" size="16"><Close /></el-icon>
      </span>
    </div>
    <div class="rank">
      <Skeleton :loading="loadings">
        <template #ske>
          <div
            style="
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: center;
            "
          >
            <van-skeleton-paragraph style="width: 100%; height: 100px" />
            <van-skeleton-paragraph
              style="width: 100%; height: 50px; margin-top: 10px"
            />
            <van-skeleton-title
              style="width: 30%; height: 30px; margin-top: 10px"
            />
            <div style="width: 100%">
              <van-skeleton-title
                style="width: 33%; height: 15px; margin: 10px 0"
              />
            </div>
          </div>
        </template>
        <template #main>
          <table>
            <thead>
              <tr>
                <th>{{ $t("language.rank.head1") }}</th>
                <th>{{ $t("language.rank.head2") }}</th>
                <th>{{ $t("language.rank.head3") }}</th>
                <th>{{ $t("language.rank.head4") }}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td colspan="4">{{ $t("language.rank.main") }}</td>
              </tr>
            </tbody>
          </table>
          <div class="page">
            <el-pagination
              :hide-on-single-page="value"
              :total="5"
              layout="prev, pager, next"
            />
          </div>
          <h4>{{ $t("language.rank.title") }}</h4>
        </template>
      </Skeleton>

      <dl>
        <dd v-for="(item, index) in imglist" :key="index">
          <Skeleton :loading="loadings">
            <template #ske>
              <div style="width: 100%">
                <van-skeleton-image
                  style="
                    width: 100%;
                    height: 180px;
                    margin: 0 0 10px;
                    border-radius: 20px;
                  "
                />
                <van-skeleton-title style="width: 100%; height: 15px" />
              </div>
            </template>
            <template #main>
              <img class="low" src="@/assets/img/ha1.png" alt="" />
              <img class="big" v-lazy="item" alt="" />
              <span>Emoji Riches-Hash rt</span>
            </template>
          </Skeleton>
        </dd>
      </dl>
      <span class="btn">{{ $t("language.rank.btn") }}</span>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, watch, nextTick, reactive } from "vue";

let loadings = ref(true);

const centerDialogVisible = ref(false);
let iscomponent = ref("login");
const value = ref(false);
const getImg = (url) => {
  return new URL(`../assets/img/${url}`, import.meta.url).href;
};
let close = () => {
  centerDialogVisible.value = false;
  iscomponent.value = "login";
  // console.log(3443);
  
};
let open = () => {
  centerDialogVisible.value = true;
};
watch(centerDialogVisible, (newval) => {
  if (newval) {
    nextTick(() => {
      // loadings.value = false;
      let time = setInterval(() => {
        loadings.value = false;
        clearInterval(time);
      }, 500);
    });
  }
});

let imglist = reactive([
  getImg("ra1.png"),
  getImg("ra2.jpg"),
  getImg("ra3.png"),
  getImg("ra4.jpg"),
  getImg("ra5.jpg"),
  getImg("ra6.jpg"),
  getImg("ra7.jpg"),
  getImg("ra8.png"),
  getImg("ra9.jpg"),
  getImg("ra10.jpg"),
  getImg("ra11.jpg"),
  getImg("ra12.png"),
]);
defineExpose({
  open,
});
</script>

<style lang="scss">
.el-dialog {
  padding: 10px !important;
  background-color: #32353e !important;
  --el-dialog-bg-color: #32353e !important;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}
.el-pager li {
  background-color: rgb(26, 26, 26) !important;
  color: #0a906c !important;
}
.el-pagination button {
  background: rgb(26, 26, 26) !important;
}
.el-dialog__header {
  padding: 0 0 0 !important;
}
.closerank {
  width: 100%;
  @include flex(row, space-between, center);
  border-bottom: 1px solid #4a4c53;
  padding-bottom: 15px;
  strong {
    width: 30px;
    display: block;
  }
  h3 {
    font-size: 18px;
    color: #b5b6c8;
    text-align: center;
    flex: 1;
  }
  span {
    display: block;
    width: 28px;
    height: 28px;
    @include flex(row, center, center);
    border: 2px solid #b5b6c8;
    border-radius: 16px;
  }
}
.btn {
  width: 200px;
  height: 32px;
  display: block;
  line-height: 32px;
  margin: 20px auto 40px;
  border-radius: 3px;

  text-align: center;
  font-size: 14px;
  cursor: pointer;
  color: #878d9f;
  background: #0c8560;
  color: #fff;
  border-radius: 5px;
}
.rank {
  .van-skeleton-image,
  .van-skeleton-paragraph,
  .van-skeleton-title,
  .van-skeleton-avatar {
    background-color: rgb(61, 65, 72) !important;
    margin: 0;
    padding: 0;
  }
  padding: 0 10px;
  width: 100%;
  .page {
    @include flex(row, center, center);
    margin-top: 15px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    padding: 0;
    border: 1px solid #3d4148;
    th {
      text-align: center;
      font-size: 14px;
      color: #b5bac8;
      height: 100%;
      padding: 8px;
      line-height: 24px;
      font-weight: bold;
      background-color: rgb(61, 65, 72);
      border: 1px solid #4b4e55;
    }
    td {
      text-align: center;
      font-size: 14px;
      color: #b5bac8;
      padding: 20px 8px;
    }
    tbody {
      background-color: rgb(36, 38, 43);
    }
  }
  h4 {
    color: #b5b6c8;
    font-size: 16px;
    margin: 20px 0;
  }
  dl {
    height: 480px;
    overflow-y: auto;
    width: 100%;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
    @include flex(row, space-between, flex-end);
    flex-wrap: wrap;
    dd {
      position: relative;
      @include flex(column, flex-end, flex-start);
      width: 29%;
      margin-bottom: 30px;
      .low {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
      }
      .big {
        width: 100%;
        border-radius: 20px;
      }
      span {
        display: block;
        width: 100%;
        font-size: 14px;
        color: #b5b6c8;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
